<template>
	<!-- 调用弹框使用<a>标签，如下面一行所示 -->
	<!-- <a href="#image-upload" data-toggle="modal">选择图片</a> -->

	<!-- 弹框内容 -->
	<div class="modal fade in" id="image-upload">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-body wrapper-lg">
					<div class="row">
						<div class="form-group">
							<label class="col-sm-2 control-label">本地图片</label>
							<div class="col-sm-10">
								<input type="file" @change="uploadImg($event)" name="localFile" class="filestyle" accept="image/*" data-icon="false"
								 data-classbutton="btn btn-default" data-classinput="form-control inline v-middle input-s" id="filestyle-0"
								 style="position: fixed; display: none;">
								<div class="bootstrap-filestyle" style="display: inline;"><input type="text" class="form-control inline v-middle input-s"
									 disabled="">
									<label for="filestyle-0" class="btn btn-success"><span>选择图片</span></label>
								</div>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">网络图片</label>
							<div class="col-sm-10">
								<el-input v-model.trim="posterSrc" clearable></el-input>
								<!-- <input type="text" v-model.trim="posterSrc" class="form-control"> -->
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">
								裁剪
							</label>
							<div class="col-sm-5" style="height: 450px;">
								<!-- <VueCropper ref="cropper" crossorigin="anonymous" :img="posterSrc" :autoCrop="true" autoCropWidth="300"
								 autoCropHeight="450" :fixedBox="true" :canMoveBox="false" :fixed="true" :fixedNumber="[10, 15]" :canMove="true">
								</VueCropper> -->

								<vue-picture-cropper :boxStyle="{
								      width: '100%',
								      height: '100%',
								      backgroundColor: '#f8f8f8',
								      margin: 'auto'
								    }"
								 :img="posterSrc" :options="{
								      viewMode: 1,
								      dragMode: 'crop',
								      aspectRatio: 300 / 450,
								      preview: 'previewImg',
								    }"
								 @ready="" />
							</div>
							<div class="col-sm-5 text-center">
								<img id="previewImg" v-if="posterSrcLooking !=null" :src="posterSrcLooking" style="height: 450px;">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<div class="col-sm-12 text-right">
								<button type=" button" class="btn btn-success" @click="down('blob')">另存为</button>
								&nbsp;
								<button type="button" class="btn btn-success" @click="down()">预览</button>
								&nbsp;
								<button type="button" class="btn btn-success" @click="upload()">确定</button>
							</div>
						</div>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
</template>

<script>
	import VuePictureCropper, {
		cropper
	} from 'vue-picture-cropper'
	import {
		defineComponent
	} from 'vue'

	// 设定裁切后指定尺寸为300x450，通常可以为banner图裁切指定尺寸
	const OPT = {
		width: 300,
		height: 450
	}

	export default defineComponent({
		name: 'image-upload',
		components: {
			VuePictureCropper
		},
		props: {},
		data() {
			return {
				posterSrc: '',
				posterSrcLooking: null,
				fileName: '网络图片.jpg'
			}
		},
		setup(props, {
			emit
		}) {
			// const total = props.total;
			// const pageSize = props.pageSize;
			// const pageNo = props.pageNo;

			// 更新父类poster
			function updatePoster(code) {
				emit('getPoster', code)
			}

			return {
				updatePoster
			}
		},
		mounted() {

		},
		methods: {
			uploadImg(e) { //选择本地图片
				console.log('uploadImg');
				var _this = this;
				//上传图片 
				var file = e.target.files[0]
				_this.fileName = file.name;
				console.debug("cropper fileName", _this.fileName);
				if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
					alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
					return false
				}
				var reader = new FileReader();
				reader.onload = (e) => {
					let data;
					if (typeof e.target.result === 'object') {
						// 把Array Buffer转化为blob 如果是base64不需要 
						data = window.URL.createObjectURL(new Blob([e.target.result]))
					} else {
						data = e.target.result
					}
					if (data != null) {
						_this.posterSrc = data
						_this.posterSrcLooking = data
					}
				}
				// 转化为base64 
				// reader.readAsDataURL(file) 
				// 转化为blob 
				reader.readAsArrayBuffer(file);
			},
			down(type) { //下载图片
				// 裁切后会按照该尺寸生成结果
				var data_url;
				if (type === 'blob') {
					var aLink = document.createElement('a')
					aLink.download = this.fileName
					const data_blob = cropper.getBlob(OPT);
					// this.downImg = window.URL.createObjectURL(data_blob);
					aLink.href = data_blob;
					aLink.click();
					console.debug("cropper data", data_blob);
				} else {
					const data_url = cropper.getDataURL(OPT);
					this.posterSrcLooking = data_url;
					console.debug("cropper data", data_url);
				}
			},
			upload() {
				const data_blob = cropper.getBlob(OPT);
				this.$api.file.upload(new File([data_blob], this.fileName, {
					type: 'image/jpeg'
				})).then(resp => {
					console.debug("upload resp", resp);
					this.updatePoster(resp.code);
					$('#image-upload').modal('toggle');
				});
			}
		},
		watch: {
			posterSrc(src) {
				console.debug("cropper.refresh", src);
				// this.$refs.cropper.refresh();
				// this.$refs.cropper.reload();
			}
		}
	})
</script>
